<script setup>
import {HomeFilled, Flag, Opportunity, Position, Menu, Avatar, OfficeBuilding} from '@element-plus/icons-vue'
import {inject, ref} from "vue";
import {useRouter} from "vue-router";

const router = useRouter();
//接收数据
const isCollapse = inject('isCollapse')
</script>

<template>
  <el-scrollbar style="background: #ccc">
    <el-menu
        class="el-menu-vertical-demo"
        text-color="#fff"
        background-color="#545c64"
        active-text-color="#ffd04b"
        style="height: 100vh"
        default-active="1"
        :collapse="isCollapse"
        :collapse-transition="false"
    >
      <el-menu-item @click="router.push('/')" index="1">
        <el-icon>
          <HomeFilled/>
        </el-icon>
        <template #title>
          <span>首页</span>
        </template>
      </el-menu-item>
      <el-menu-item @click="router.push('adminManage')" index="2">
        <el-icon>
          <Avatar/>
        </el-icon>
        <template #title>
          <span>管理员管理</span>
        </template>
      </el-menu-item>
      <el-menu-item @click="router.push('userManage')" index="3">
        <el-icon>
          <Avatar/>
        </el-icon>
        <template #title>
          <span>用户管理</span>
        </template>
      </el-menu-item>
      <el-menu-item @click="router.push('warehouseManage')" index="4">
        <el-icon>
          <OfficeBuilding/>
        </el-icon>
        <template #title>
          <span>仓库管理</span>
        </template>
      </el-menu-item>
      <el-menu-item @click="router.push('goodsTypeManage')" index="5">
        <el-icon>
          <Menu/>
        </el-icon>
        <template #title>
          <span>物品分类管理</span>
        </template>
      </el-menu-item>

    </el-menu>
  </el-scrollbar>
</template>


<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 300px;
  min-height: 400px;
}
</style>